<template>
    <div>
        <div class=" login_header p-[12px]">
            <van-icon name="cross" color="red" size="33" />
        </div>
        <div class="flex justify-center "><img src="../../assets/login.png" alt=""></div>
    </div>
    <div class="flex justify-center">
        <van-tabs v-model:active="active" class="w-[412px]">
            <van-tab title="密码登录">
                <van-form @submit="onSubmit">
                    <van-cell-group inset>
                        <van-field v-model="username" name="userName" label="用户名" placeholder="用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]" />

                        <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]" />
                    </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round block type="danger" native-type="submit">
                            提交
                        </van-button>
                    </div>
                </van-form>
            </van-tab>

        </van-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { LoginTYpe } from '../../types/login'
import { postlogin } from '../../api/login'
import { useRouter } from 'vue-router'
import { showFailToast, showSuccessToast } from 'vant'
const router = useRouter()
const active = ref<number>(0);
const username = ref<string>('13478565555')
const password = ref<string>('123456')
const onSubmit = async (values: LoginTYpe) => {

    const { data } = await postlogin(values)
    if (data?.success_code === 200) {
        showSuccessToast('登录成功');
        router.push('/index')
    } else {
        showFailToast(data?.message)
    }


}

</script>

<style scoped>
/deep/.van-tabs__nav {}
</style>